import React, { useState, useEffect } from 'react';
import { Row, Col, Menu, BackTop, Drawer } from 'antd';
// const { SubMenu } = Menu;
import { createFromIconfontCN, DashOutlined } from '@ant-design/icons';
import API from '../util/apiUrl';
import iconUrl from '../util/iconUrl';
import Router from 'next/router';
import cssHeader from '../static/style/components/header.scss';

const IconFont = createFromIconfontCN({
  scriptUrl: iconUrl,
});

const Header = (props) => {
  console.log('header props', props, 'cssHeader', cssHeader);
  const [current, setCurrent] = useState(props.current || '1'); //导航默认选中值key
  const [typeList, setTypeList] = useState([]);
  // let carouselRef = null;
  const [visible, setVisible] = useState(false);
  const drawerOnClose = () => {
    setVisible(false);
  };

  const style = {
    height: 40,
    width: 40,
    lineHeight: '40px',
    borderRadius: 4,
    backgroundColor: '#1088e9',
    color: '#fff',
    textAlign: 'center',
    fontSize: 14,
  };

  useEffect(() => {
    window.addEventListener('scroll', changeNavColor);
    getTypeList();
    return () => {
      window.removeEventListener('scroll', changeNavColor);
    };
  }, []);

  //   获取导航栏数据
  const getTypeList = async () => {
    try {
      API.getTypeList().then((res) => {
        console.log('resgetTypeList', res);
        setTypeList(res.data);
        if (props.getBgcUrl) {
          props.getBgcUrl(res.data[current - 1]);
        }
      });
    } catch (error) {
      console.log('err', error);
    }
  };

  // 改变顶部样式
  const changeNavColor = (e) => {
    let scrollTop = window.pageYOffset;
    let nav = document.getElementById('nav');
    let h3 = document.querySelector('#nav h3');
    let menu = document.querySelectorAll('#nav .ant-menu li');
    let more = document.querySelector('#nav #more');
    let menuSelected = document.querySelector(
      '#nav .ant-menu .ant-menu-item-selected'
    );
    if (scrollTop > 1) {
      // nav.style.backgroundImage =
      //   'linear-gradient(to right, rgba(118,234,215,0.7), rgba(196,251,109,0.7))';
      nav.style.cssText =
        'background-color : #fff; box-shadow: 0 -9px 18px 5px rgba(0,0,0,1);';
      h3.style.color = '#999';
      more.style.color = '#221f3b';
      menu.forEach((i) => {
        i.style.color = '#999';
      });
      menuSelected && (menuSelected.style.color = '');
    } else {
      // nav.style.backgroundImage = 'none';
      nav.style.cssText = 'background-color : transparent; box-shadow:none;';
      h3.style.color = '#fff';
      more.style.color = '#fff';
      menu.forEach((i) => {
        i.style.color = '#fff';
      });
      menuSelected && (menuSelected.style.color = '');
    }
  };

  const handleClick = (e) => {
    console.log('点击导航', e.key);
    setVisible(false);
    if (current == e.key) {
      return false;
    }
    !e.isSlow && setCurrent(e.key);
    switch (e.key - 0) {
      case 1:
        Router.push('/index');
        break;
      case 2:
        Router.push('/article');
        break;
      case 3:
        Router.push('/live');
        break;
      case 4:
        Router.push('/interact');
        break;

      default:
        break;
    }
  };

  // const carouselOnChange = (a, b, c) => {
  //   console.log(a, b, c);
  // };
  return (
    <>
      <div className={cssHeader.header} id="nav">
        <Row>
          <Col xs={20} sm={20} md={13} lg={13} xl={13}>
            <h1
              onClick={() => {
                handleClick({ key: '1' });
              }}
              style={{ cursor: 'pointer' }}
            >
              YZYの博客
            </h1>
            <h3 className={cssHeader.explain}>多学一点芝士, 少写一行代码</h3>
          </Col>
          <Col xs={0} sm={0} md={11} lg={11} xl={11}>
            <Menu
              onClick={handleClick}
              selectedKeys={current}
              mode="horizontal"
            >
              {typeList.map((i) => (
                <Menu.Item
                  key={i.id}
                  icon={<IconFont type={i.icon || 'icon-smile'} />}
                >
                  {i.name}
                </Menu.Item>
              ))}
            </Menu>
          </Col>
          <Col xs={4} sm={4} md={0} lg={0} xl={0} style={{}}>
            <DashOutlined
              className={cssHeader.more}
              style={{ fontSize: 50, color: '#fff' }}
              size="large"
              id='more'
              onClick={() => {
                setVisible(true);
              }}
            />
          </Col>
        </Row>
      </div>

      <BackTop style={{ right: 30 }}>
        {/* <div className='backTopUp'>up</div> */}
        <IconFont className="backTopUp" type="icon-huidaodingbu" />
      </BackTop>

      <Drawer
        title="更多"
        placement="right"
        closable={false}
        onClose={drawerOnClose}
        visible={visible}
        width="150px"
      >
        {typeList.map((i) => (
          <p
            style={{ fontSize: 18 }}
            key={i.id}
            onClick={() => {
              handleClick({ key: i.id, isSlow: true });
            }}
          >
            <IconFont type={i.icon || 'icon-smile'} />
            {i.name}
          </p>
        ))}
      </Drawer>
      {/* <div className={cssHeader.Carousel}>
        <Carousel
          afterChange={carouselOnChange}
          ref={(el) => {
            carouselRef = el;
          }}
          dots={false}
        >
          {typeList.length ? (
            typeList.map((i) => (
              <div className={cssHeader.CarouselItem} key={i.id}>
                <div
                  style={{ backgroundImage: `url(${i.carousel_img})` }}
                  className={cssHeader.CarouselImg}
                >
                  <div className={cssHeader.content}>
                    <div className={cssHeader.title}>
                      <h3>{i.name}</h3>
                      <span>一些文字..</span>
                    </div>
                    <div className={cssHeader.btn}>
                      <Button icon={<ArrowDownOutlined />} ghost size={'large'} shape="round" style={{marginRight:'70px'}}>阅读正文</Button>
                      <Button ghost size={'large'} shape="round">阅读正文</Button>
                    </div>
                    <div className={cssHeader.myContact}>
                      <QqOutlined />
                      <QqOutlined />
                      <QqOutlined />
                      <QqOutlined />
                    </div>
                  </div>
                </div>
              </div>
            ))
          ) : (
            <div className={cssHeader.CarouselItem}>
              <Spin />
            </div>
          )}
        </Carousel>
      </div> */}
    </>
  );
};

export default Header;
